{{define "pills_chat_tab"}}
<div>
    <div class="px-4 pt-4">
        <h4 class="mb-4">Maker Chats</h4>
        <div class="search-box chat-search-box">
            <div class="input-group mb-3 bg-light  input-group-lg rounded-lg">
                <div class="input-group-prepend">
                    <button class="btn btn-link text-muted pr-1 text-decoration-none" type="button">
                        <i class="ri-search-line search-icon font-size-18"></i>
                    </button>
                </div>
                <input type="text" class="form-control bg-light" placeholder="搜索消息记录或者人">
            </div> 
        </div> <!-- Search Box-->
    </div> <!-- .p-4 -->

    <!-- Start user status -->
    <div class="px-4 pb-4" dir="ltr">

        <div class="owl-carousel owl-theme" id="user-status-carousel">
            <div class="item">
                <a href="#" class="user-status-box">
                    <div class="avatar-xs mx-auto d-block chat-user-img online">
                        <img src="/assets/images/users/avatar-2.jpg" alt="user-img" class="img-fluid rounded-circle">
                        <span class="user-status"></span>
                    </div>

                    <h5 class="font-size-13 text-truncate mt-3 mb-1">王继超</h5>
                </a>
            </div>
            <div class="item">
                <a href="#" class="user-status-box">
                    <div class="avatar-xs mx-auto d-block chat-user-img online">
                        <img src="/assets/images/users/avatar-4.jpg" alt="user-img" class="img-fluid rounded-circle">
                        <span class="user-status"></span>
                    </div>

                    <h5 class="font-size-13 text-truncate mt-3 mb-1">王玉清</h5>
                </a>
            </div>

            <div class="item">
                <a href="#" class="user-status-box">
                    <div class="avatar-xs mx-auto d-block chat-user-img online">
                        <img src="/assets/images/users/avatar-5.jpg" alt="user-img" class="img-fluid rounded-circle">
                        <span class="user-status"></span>
                    </div>

                    <h5 class="font-size-13 text-truncate mt-3 mb-1">王智超</h5>
                </a>
            </div>

            <div class="item">
                <a href="#" class="user-status-box">
                    <div class="avatar-xs mx-auto d-block chat-user-img online">
                        <img src="/assets/images/users/avatar-6.jpg" alt="user-img" class="img-fluid rounded-circle">
                        <span class="user-status"></span>
                    </div>

                    <h5 class="font-size-13 text-truncate mt-3 mb-1">王世洋</h5>
                </a>
            </div>

            <div class="item">
                <a href="#" class="user-status-box">
                    <div class="avatar-xs mx-auto d-block chat-user-img online">
                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                            T
                        </span>
                        <span class="user-status"></span>
                    </div>

                    <h5 class="font-size-13 text-truncate mt-3 mb-1">秦伟国</h5>
                </a>
            </div>

        </div>
        <!-- end user status carousel -->
    </div>
    <!-- end user status -->

    <!-- Start chat-message-list -->
    <div class="px-2">
        <h5 class="mb-3 px-3 font-size-16">最近联系</h5>

        <div class="chat-message-list" data-simplebar>

            <ul class="list-unstyled chat-list chat-user-list">
                <li>
                    <a href="#">
                        <div class="media">
    
                            <div class="chat-user-img online align-self-center mr-3">
                                <img src="/assets/images/users/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
                                <span class="user-status"></span>
                            </div>
    
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">王愉其</h5>
                                <p class="chat-user-message text-truncate mb-0">负责天翼云平台事项处理</p>
                            </div>
                            <div class="font-size-11">05 min</div>
                        </div>
                    </a>
                </li>

                <li class="unread">
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img away align-self-center mr-3">
                                <img src="/assets/images/users/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">王宏伟</h5>
                                <p class="chat-user-message text-truncate mb-0"><i class="ri-image-fill align-middle mr-1"></i> Images</p>
                            </div>
                            <div class="font-size-11">12 min</div>

                            <div class="unread-message">
                                <span class="badge badge-soft-danger badge-pill">02</span>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img align-self-center mr-3">
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        G
                                    </span>
                                </div>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">刘珂南</h5>
                                <p class="chat-user-message text-truncate mb-0">运维服务台相关事项!</p>
                            </div>
                            <div class="font-size-11">20 min</div>
                        </div>
                    </a>
                </li>

                <li class="active">
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img online align-self-center mr-3">
                                <img src="/assets/images/users/avatar-4.jpg" class="rounded-circle avatar-xs" alt="">
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">崔鹏</h5>
                                <p class="chat-user-message text-truncate mb-0">邮箱问题处理</p>
                            </div>
                            <div class="font-size-11">10:12 AM</div>

                        </div>
                    </a>
                </li>
                <li class="unread">
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img align-self-center mr-3">
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        D
                                    </span>
                                </div>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">郭南</h5>
                                <p class="chat-user-message text-truncate mb-0">网络安全事项处理</p>
                            </div>
                            <div class="font-size-11">12:01 PM</div>
                            <div class="unread-message">
                                <span class="badge badge-soft-danger badge-pill">01</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img away align-self-center mr-3">
                                <img src="/assets/images/users/avatar-6.jpg" class="rounded-circle avatar-xs" alt="">
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">郭林杰</h5>
                                <p class="chat-user-message text-truncate mb-0"><i class="ri-file-text-fill align-middle mr-1"></i> 产权交易监测系统.zip</p>
                            </div>
                            <div class="font-size-11">03:20 PM</div>
    
                        </div>
                    </a>
                </li>
                <li class="typing">
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img align-self-center online mr-3">
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        A
                                    </span>
                                </div>
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">孙皓</h5>
                                <p class="chat-user-message text-truncate mb-0">打字中<span class="animate-typing">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </span></p>
                            </div>
                            <div class="font-size-11">04:56 PM</div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img align-self-center online mr-3">
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        M
                                    </span>
                                </div>
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">李珍瑞</h5>
                                <p class="chat-user-message text-truncate mb-0">协调数据相关事项处理</p>
                            </div>
                            <div class="font-size-11">12/07</div>
    
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img away align-self-center mr-3">
                                <img src="/assets/images/users/avatar-7.jpg" class="rounded-circle avatar-xs" alt="">
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">李旺</h5>
                                <p class="chat-user-message text-truncate mb-0">外网应用负责人</p>
                            </div>
                            <div class="font-size-11">12/07</div>
    
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img align-self-center online mr-3">
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        J
                                    </span>
                                </div>
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">孙果</h5>
                                <p class="chat-user-message text-truncate mb-0">监测应用问题处理</p>
                            </div>
                            <div class="font-size-11">12/07</div>
    
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img away align-self-center mr-3">
                                <img src="/assets/images/users/avatar-8.jpg" class="rounded-circle avatar-xs" alt="">
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">李楠</h5>
                                <p class="chat-user-message text-truncate mb-0">应急指挥事项处理</p>
                            </div>
                            <div class="font-size-11">11/07</div>
    
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="media">
                            <div class="chat-user-img align-self-center online mr-3">
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        S
                                    </span>
                                </div>
                                <span class="user-status"></span>
                            </div>
                            <div class="media-body overflow-hidden">
                                <h5 class="text-truncate font-size-15 mb-1">舟武</h5>
                                <p class="chat-user-message text-truncate mb-0">XX系统问题处理</p>
                            </div>
                            <div class="font-size-11">11/07</div>

                        </div>
                    </a>
                </li>


            </ul>
        </div>

    </div>
    <!-- End chat-message-list -->
</div>
{{end}}